<!DOCTYPE html>
<html lang="cn">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style type="text/css">
        #list li{
            width: 300px;
            line-height: 40px;
            border-bottom: 1px solid black;
            font-size: 25px;
            cursor: pointer;
        }


        div{
            position: absolute;
            top: 50px;
            left: 50px;
            border-radius: 50%;
        }


        #tar{position:relative;}
        #box1{width: 500px;height: 500px;background-color: #963;}
        #box2{width: 400px;height: 400px;background-color: #693;}
        #box3{width: 300px;height: 300px;background-color: #369;}
        #box4{width: 200px;height: 200px;background-color: #639;}
        #box5{width: 100px;height: 100px;background-color: red;}
    </style>

    <script src="../jquery-3.3.1.min.js"></script>
    <script>
        
        //JQ标准绑定形式
        // $('#list li').bind('click',function(){
        //     alert($(this).html());
        // });
        

        //多个事件绑定
        // $('#list li').bind({
        //     'mouseover':function(){
        //         $(this).css('background-color','blue');},
        //         'mouseout': function(){
        //         $(this).css('background-color','');
        //     }
        // });
        // 
        // 
        

        //on()单事件
        // $('#list li').on('click', function(){
        // alert($(this).html());
        // });
        

        //on()多事件
        
        // $('#list li').on({
        //     'mouseover' : function(){
        //         $(this).css('background-color','#369');
        //     },
        //     'mouseout' : function(){
        //         $(this).css('background-color','');
        //     }
        // });


        // event
        
        // $('#list').on('mousemove', function(e){
        //     // console.log(e);
        //     console.log(e.pageX, e.pageY); //鼠标位置

        //     console.log(eoffsetX , e.offsetY);//相对位置
        // });
        // 
        // 
        
        // 添加新元素到页面中
        
        // $('#add').click(function(){
        //     $('<li>啊,真是一首好诗!</li>').appendTo('#list');
        // });

        // //事件委托
        // $(document).on('mouseover','#list li',function(){
        //     $(this).css('background-color','red');
        // }).on('mouseout','#list li', function(){
        //     $(this).css('background-color','');
        // });

        // //一次性的事件
        
        // $('#down').one('click', function(){
        //     alert('澳门赌场上线了');
        // });


        // //解绑事件
        
        // $('#remove').click(function(){
        //     console.log('解绑成功');

        //解绑所有li的事件(非委托)
        //$('#list li').off();
        
        //解绑指定li的事件(费委托)
        //$('#list li').off('mouseout click');
        
        
        //解绑所有li的事件(委托)
        //$(document).off('mouseout mouseover','#list li');
        
        });

        //自动触发
        
        // $('#add').trigger('click');
        

        //阻止默认事件
        
        //$('form').on('submit',false);
        

        //$('#ac').click(function(){
        //  处理逻辑
        //  return false;
        //});
        

        //阻止事件冒泡
        // $('div').on('click',function(){
        //     $(this).css('background-color','#000');
        //     return false;
        // });
    </script>
</head>
<body>

    <h1>JQ事件</h1>

    <button id="add">添加一行li标签</button>
    <button id="down">点击立即下载</button>
    <button id="remove">点击解绑</button>

    <a href="http:www.baidu.com"  id="bd">百度</a>
    <a href="javascript:void(0)">无效链接</a>

    <hr>

    <ul id="list">
        <li>七步诗----曹植</li>
        <li>煮豆燃豆萁</li>
        <li>豆在釜中泣</li>
        <li>本是同根生</li>
        <li>相煎何太急</li>
    </ul>
    
    <form action="1.php">
        <button type="submit">提交</button>
    </form>


    <div id="tar">
        <div id="box1">
            <div id="box2">
                <div id="box3">
                    <div id="box4">
                        <div id="box5"></div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</body>
</html>